<template>
	<view class="page page-salesproduct">
		<view pt-5px mb-5px>
			<uni-segmented-control :current="current" :values="tabs" style-type="text" active-color="#0041a5" @clickItem="onTabsClick" />
		</view>

		<view class="list-wrap" v-if="list.length">
			<template v-for="(v,k) in list" :key="v.goods_id">
				<view class="list-item" @click="goProduct(v.goods_id)">
					<image class="logo" :src="v.image_thumb" mode="aspectFill" />
					<view class="right">
						<view class="top">
							<view text-base fw-600 truncate>{{ v.name }}</view>
							<view text-s c-gray-5 truncate>{{ v.description }}</view>
							<view c-red-5 fw-500 text-base>￥{{ v.price || '可议价' }}</view>
						</view>
						
						<view class="btns">
							<view class="btn" @click.stop="phoneCall(v.goods_id)">电话</view>
							<view class="btn" @click.stop="gosales(v.goods_id,v.name)">留言</view>
						</view>
					</view>
				</view>
				<divider spacing="10px"></divider>
			</template>
		</view>

		<view v-else-if="!loading" flex items-center justify-center flex-col pt-100px color-gray>
			<view class="icon icon-nodata text-8xl"></view>
			<view pt-10px>暂无数据</view>
		</view>
	</view>

</template>

<script setup>
	import api from '@/api'
	import { ref } from 'vue'
	import { makePhoneCall } from '@/common/utils'
	import { useUserStore, useBaseStore } from '@/stores/user'
	const user = useUserStore()
	const { baseInfo } = useBaseStore()

	const page_no = ref(1) 
	const page_size = ref(100) 
	const loadedAll = ref(false)
	const loading = ref(false)
	const list = ref([])
	const current = ref(0)
	const onTabsClick = ({currentIndex}) => {
		if (current.value == currentIndex) return
		current.value = currentIndex
		page_no.value = 1
		loadedAll.value = false
		list.value = []
		getList()
	}


	const goProduct = id => {
		uni.navigateTo({
			url: `/pages/salesproduct/detail?id=${id}`
		})
	}

	const phoneCall = id => {
		makePhoneCall({
			phone: baseInfo.platform_service_phone,
			source: 'goods',
			id
		})
	}

	const gosales = (id,name) => {
		if(!user.mobile) {
			show_auth.value = true
			return
		}
		uni.navigateTo({
			url: `/pages/pickupsale/index?type=1&id=${id}&name=${name}`
		})
	}

	let types = []
	const tabs = ref([])
	async function fn(){
		const catRes = await api.goodsCatList({parent_id: 0})
		types = [{ name: '全部', id: 0 }, ...catRes]
		tabs.value = types.map(i => i.name)
		getList()
	}
	fn()

	async function getList() {
		if(loadedAll.value) return
		if(loading.value) return
		loading.value = true
		const data = await api.saleList({
			page_size: page_size.value,
			page_no: page_no.value,
			category_id: types[current.value].id,
		})
		if(data.list.length < page_size.value) {
			loadedAll.value = true
		}
		page_no.value += 1
		list.value = [ ...list.value, ...data.list]
		loading.value = false
	}


</script>

<style lang="scss">
.page-salesproduct {

	.list-wrap {
		padding: 15px;
		.list-item {
			display: flex;
			align-items: center;
			
			.logo {
				width: 240upx;
				height: auto;
				aspect-ratio: 3/4;
			}

			.right {
				padding-left: 15px;
				flex: 1;
				align-self: stretch;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.to-store {
				display: inline-flex;
				align-items: center;
				background-color: #f1f1f1;
				border-radius: 100px;
				padding: 2px 10px;
				box-sizing: border-box;
			}
		}
	}

	.btns {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color: white;
		.btn {
			background-color: $uni-color-navigator;
			border-radius: 100px;
			padding: 10upx 30upx;
			text-align: center;

			&:last-of-type {
				background-color: orangered;
				margin-left: 20upx;
			}
		}
	}
	
}

</style>

